<template>
	<div v-loading="loading" class="statement-points-change app-main-content-box">
		<!-- 积分变动记录 -->
		<app-main-title title="积分变动记录" />
		<!-- 变动说明 -->
		<div class="app-main-tips-box top-tips">
			<div class="title">
				<i class="el-icon-warning" />
				报表说明
			</div>
			<ul>
				<li>1.本报表是积分变动的所有记录，你可以通过筛选数据，得到自己对账或者数据分析所需的数据。</li>
				<li>2.业务单号只有部分记录会具有, 比如通过积分商城兑换使用的积分。</li>
			</ul>
		</div>

		<!-- 筛选 -->
		<div class="filter">
			<el-form ref="filterForm" :model="filterForm" label-width="100px" size="small">
				<el-form-item label="选择时间：" prop="date" :rules="[{ required: true, message: '时间区间不能为空' }]">
					<el-date-picker
						v-model="filterForm.date"
						type="datetimerange"
						range-separator="~"
						value-format="yyyy-MM-dd HH:mm:ss"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					/>
				</el-form-item>

				<!-- 筛选 -->
				<div class="app-main-filter-collapse-box">
					<el-collapse>
						<el-collapse-item ref="filterCollapse" title="按条件筛选" name="1">
							<el-form-item label="业务类型：" prop="bizCode">
								<el-radio-group v-model="filterForm.bizCode">
									<el-radio label="all">全部</el-radio>
									<template v-for="(item, index) in manageBizCodeOptions">
										<el-radio :key="index" :label="item.key">{{ item.label }}</el-radio>
									</template>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="业务来源：" prop="sourceCode">
								<el-radio-group v-model="filterForm.sourceCode">
									<el-radio label="all">全部</el-radio>
									<template v-for="(item, index) in sourceCodeOptions">
										<el-radio :key="index" :label="item.key">{{ item.label }}</el-radio>
									</template>
								</el-radio-group>
							</el-form-item>
							<!-- <el-form-item label="变动类型：" prop="sources">
                <el-checkbox
                  :indeterminate="isIndeterminateSources"
                  v-model="checkAllSources"
                  @change="handleCheckAllSourcesChange"
                  class="fl"
                >全选</el-checkbox>
                <el-checkbox-group
                  v-model="filterForm.sources"
                  @change="handleCheckBusinessTypeChange"
                >
                  <el-checkbox
                    :label="item"
                    v-for="(item,index) in sourcesOption"
                    :key="index"
                  >{{item}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>-->
						</el-collapse-item>
					</el-collapse>
				</div>

				<el-form-item class="filter-btn">
					<el-button type="primary" round @click="submitForm('filterForm')">查 询</el-button>
					<el-button round @click="resetForm('filterForm')">重 置</el-button>
					<!-- <el-button v-if="!$store.getters.banBtnList.includes('BTN_POINTS_CHANGE_DETAIL_EXPORT')" round @click="downExcel">导 出</el-button> -->
				</el-form-item>
			</el-form>
		</div>

		<!-- 统计卡片 start -->
		<div><AppTableStatisticsCard :statistics-card-data="statisticsCardData" /></div>
		<!-- 统计卡片 end -->

		<!-- 列表 -->
		<div class="consume-table">
			<el-table :data="list" border style="width: 100%" empty-text="暂无数据">
				<el-table-column prop="createTime" label="变动时间" fixed="left" />
				<el-table-column prop="memberName" label="会员名称" />
				<el-table-column prop="categoryName" label="卡类型" />
				<el-table-column prop="cardNo" label="卡号" />
				<el-table-column prop="businessSource" label="业务类型">
					<template slot-scope="scope">
						{{ bizCodeKeyOptions[scope.row.bizCode] }}
					</template>
				</el-table-column>
				<el-table-column prop="businessSource" label="业务来源">
					<template slot-scope="scope">
						{{ sourceCodeKeyOptions[scope.row.sourceCode] }}
					</template>
				</el-table-column>
				<el-table-column prop="points" label="变动积分">
					<template slot-scope="scope">
						<span :class="scope.row.points > 0 ? 'app-text-color-danger' : 'app-text-color-success'">
							{{ scope.row.points > 0 ? '+' + scope.row.points : scope.row.points | parseNumberToThousands(0, false) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="allPoints" label="变动后总积分" />
				<el-table-column prop="shopName" label="消费门店">
					<template slot-scope="scope">
						<span>{{ scope.row.shopName ? scope.row.shopName : '总部' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="kdEndpoint" label="消费终端" />
				<el-table-column prop="operator" label="操作人" />
				<el-table-column prop="businessOrder" label="业务单号" />
				<el-table-column prop="remark" label="备注" />
			</el-table>

			<!-- 分页 -->
			<pagination-direction v-if="paginationConfig.total !== 0" :config="paginationConfig" @sizeschange="sizesChange" @pagechange="pageChange" />
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getPointsChangeRecordsList, getPointsChangeRecordsCount } from '@/api/statement';
export default {
	data() {
		return {
			// 配置
			// 分页配置
			paginationConfig: {
				direction: 'center', // 分页位置
				layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
				pageSizes: [10, 20], // 分页pages
				total: 0,
				page: 1, // 页数-默认1
				pageSize: 10 // 每页条数-默认10
			},
			sourcesOption: [
				'消费奖励',
				'消费退款回收',
				'线上充值奖励',
				'推广会员奖励',
				'升级会员奖励',
				'积分兑换',
				'支付抵现',
				'支付退款返还',
				'积分清零',
				'会员导入',
				'人工客服增加',
				'人工客服扣除'
			],
			// 状态
			checkAllSources: true, // sources 多选状态
			isIndeterminateSources: false, // sources
			loading: false, // 表格loading
			// 数据
			statisticsCardData: [],
			list: [], // 表格数据
			filterForm: {
				bizCode: 'all',
				sourceCode: 'all',
				date: [this.$momentMini().format('YYYY-MM-DD') + ' 00:00:00', this.$momentMini().format('YYYY-MM-DD') + ' 23:59:59']
				// sources: [
				//   "消费奖励",
				//   "消费退款回收",
				//   "线上充值奖励",
				//   "推广会员奖励",
				//   "升级会员奖励",
				//   "积分兑换",
				//   "支付抵现",
				//   "支付退款返还",
				//   "积分清零",
				//   "会员导入",
				//   "人工客服增加",
				//   "人工客服扣除"
				// ]
			}
		};
	},
	computed: {
		...mapGetters(['manageBizCodeOptions', 'sourceCodeOptions', 'bizCodeKeyOptions', 'sourceCodeKeyOptions'])
	},
	mounted() {
		this.fetchData();
	},
	methods: {
		/**
		 * 获取数据
		 */
		// 获取记录数据
		fetchData(page = this.paginationConfig.page, pageSize = this.paginationConfig.pageSize) {
			this.$refs.filterForm.validate(valid => {
				if (valid) {
					const params = this.setRequestParams();
					params.page = page;
					params.pageSize = pageSize;
					this.loading = true;
					Promise.all([this.getList(params), this.getCount(params)]).then(res => {
						this.loading = false;
					});
				}
			});
		},

		// 获取请求筛选数据
		setRequestParams() {
			const params = Object.assign({}, this.filterForm);
			params.startTime = params.date[0];
			params.endTime = params.date[1];
			// params.sources =
			//   params.sources.length == this.sourcesOption.length
			//     ? ""
			//     : params.sources.join(",");
			delete params.date;
			// 清除多余字段
			for (const key in params) {
				if (params[key] === '' || params[key] === 'all') {
					delete params[key];
				}
			}
			return params;
		},

		// 获取列表
		getList(params) {
			return new Promise((resolve, reject) => {
				getPointsChangeRecordsList(params)
					.then(res => {
						this.list = res.data.list;
						this.paginationConfig.total = res.data.total;
						this.paginationConfig.page = res.data.pageNum;
					})
					.finally(() => {
						resolve();
					});
			});
		},

		// 获取统计
		getCount(params) {
			return new Promise((resolve, reject) => {
				if (params.page !== 1) {
					resolve();
				} else {
					this.statisticsCardData = [
						{
							title: '发放积分 / 个',
							value: 0,
							describeList: ['符合筛选条件的数据中发放的积分数'],
							detailList: [],
							supTitle: '含超级会员积分0'
						},
						{
							title: '使用积分 / 个',
							value: 0,
							describeList: ['符合筛选条件的数据中使用的积分数'],
							detailList: [],
							supTitle: '含超级会员积分0'
						},
						{
							title: '累计发放积分 / 个',
							value: 0,
							describeList: ['历史累计发放的所有积分'],
							detailList: [],
							supTitle: '含超级会员积分0'
						},
						{
							title: '累计使用积分 / 个',
							value: 0,
							describeList: ['历史累计使用的所有积分'],
							detailList: [],
							supTitle: '含超级会员积分0'
						},
						{
							title: '未使用积分 / 个',
							value: 0,
							describeList: ['历史累计发放减历史累计使用得到的数量'],
							detailList: [],
							supTitle: '含超级会员积分0'
						}
					];
					getPointsChangeRecordsCount(params)
						.then(res => {
							this.statisticsCardData[0].value = Math.abs(res.data.give);
							this.statisticsCardData[0].supTitle = '含超级会员积分' + Math.abs(res.data.superMemberPointsGive);

							this.statisticsCardData[1].value = Math.abs(res.data.use);
							this.statisticsCardData[1].supTitle = '含超级会员积分' + Math.abs(res.data.superMemberPointsUse);

							this.statisticsCardData[2].value = Math.abs(res.data.allGive);
							this.statisticsCardData[2].supTitle = '含超级会员积分' + Math.abs(res.data.allSuperMemberPointsGive);

							this.statisticsCardData[3].value = Math.abs(res.data.allUse);
							this.statisticsCardData[3].supTitle = '含超级会员积分' + Math.abs(res.data.allSuperMemberPointsUse);

							this.statisticsCardData[4].value = Math.abs(res.data.allGive) - Math.abs(res.data.allUse);
							this.statisticsCardData[4].supTitle = '含超级会员积分' + (Math.abs(res.data.allSuperMemberPointsGive) - Math.abs(res.data.allSuperMemberPointsUse));
						})
						.finally(() => {
							resolve();
						});
				}
			});
		},

		// 分页sizes改变
		sizesChange() {
			this.fetchData();
		},

		// 分页page改变
		pageChange() {
			this.fetchData();
		},

		// 查询
		submitForm() {
			this.fetchData(1);
		},

		// 重置
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.checkAllSources = true; // sources 多选状态
			this.isIndeterminateSources = false; // sources
		},

		/**
		 * 状态
		 */
		// checkAllSources多选状态
		handleCheckAllSourcesChange(val) {
			if (val) {
				this.filterForm.sources = this.sourcesOption;
				this.checkAllSources = true;
			} else {
				this.filterForm.sources = [];
				this.checkAllSources = false;
			}
			this.isIndeterminateSources = false;
		},

		handleCheckBusinessTypeChange(value) {
			const checkedLength = value.length;
			const maxLength = this.sourcesOption.length;
			this.checkAllSources = checkedLength === maxLength;
			this.isIndeterminateSources = checkedLength > 0 && checkedLength < maxLength;
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 头部说明 */
.top-tips {
	margin-bottom: 20px;
}

/* 筛选 */
.filter {
	.filter-btn {
		margin-bottom: 20px;
	}
	/* 重置多选左边距 */
	.el-checkbox + .el-checkbox {
		margin-left: 0;
	}
	.el-checkbox {
		margin-right: 10px;
	}
}

/* 单选换行 */
.el-radio + .el-radio {
	margin-left: 0;
}
.el-radio {
	margin-right: 10px;
	line-height: 32px;
}
</style>
